<!--https://icon-sets.iconify.design/ep/chat-dot-round/-->
<template>
	<div class="mb-2 flex justify-end items-center w-full">
		<div class="mr-4">
			<el-checkbox v-model="copyIconComponentFlag" label="复制Icon组件" size="large" />
		</div>
		<div class="mr-4">
			<el-switch v-model="copyTypeFlag" active-text="复制Icon名称" inactive-text="复制SVG图标" />
		</div>
		<div class="mr-4">
			<el-switch v-model="showTextFlag" active-text="显示文字" inactive-text="隐藏文字" />
		</div>
	</div>
	<icon-list :show-text="showTextFlag" @click="handleClick"></icon-list>
</template>

<script setup lang="ts">
import { loadIcon } from '@iconify/vue'

//region
// false - CopySvgData
/*
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" transform="translate(0,0) rotate(0)">
	<path fill="currentColor" d="M599.872 203.776a189.44 ..."/>
</svg>
*/
// true - CopyName
// Apple
const copyTypeFlag = ref(true)
//endregion
const showTextFlag = ref(true)
const copyIconComponentFlag = ref(false)

const copyVal = ref('')
const { copy, copied } = useClipboard({ source: copyVal })

async function handleClick(i: string) {
	if (copyIconComponentFlag.value)
	{
		copyVal.value = `<iconify icon="${i}"/>`;
	}
	else if (!copyTypeFlag.value)
	{
		const res = await loadIcon(i);
		copyVal.value = objectToSvg(res);
	}
	else
	{
		//ep:alarm-clock
		copyVal.value = i;
	}
	copy()
	copied &&
	ElMessage({
		message: '复制成功',
		type: 'success'
	});
}

function objectToSvg(svgObject: any) {
	const { body, hFlip, height, left, rotate, top, vFlip, width } = svgObject

	//https://icon-sets.iconify.design/ep/chat-dot-round/
	//查看选择 Code for "chat-dot-round" for developers: --- SVG 时的各项参数与变化
	//
	const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" transform="translate(${left},${top}) rotate(${rotate})${hFlip ? ' scale(-1, 1)' : ''}${vFlip ? ' scale(1, -1)' : ''}">
        ${body}
    </svg>`
	return svgString
}

</script>

<style scoped></style>
